<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <el-row>
            <el-col :span="18">
              <el-form label-width="80px">
                <el-form-item label="关键字">
                  <el-input
                    v-model="text"
                    size="mini"
                    placeholder="根据编号搜索"
                    style="width:180px;"
                  />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="6">
              <el-button
                style="float:right; margin-left:10px;"
                type="primary"
                size="mini"
                @click="searchText"
                >搜索</el-button
              >
              <el-button style="float:right" size="mini" @click="removeText"
                >清除</el-button
              >
            </el-col>
          </el-row>

          <!-- 警告提示 -->
          <el-alert v-model="counts" type="info" show-icon
            >数据一共{{ counts }}条
          </el-alert>
        </div>
        <!-- 列表 -->
        <el-table ref="tableList" :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="220">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="80">
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.questionType == "1"
                    ? "单选"
                    : scope.row.questionType == "2"
                    ? "多选"
                    : "简答"
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="220">
            <template slot-scope="scope">
              <a
                href="#"
                style="color:#0099FF;"
                v-for="(obj, index) in scope.row.questionIDs"
                :key="index"
                @click="openDialog(scope.row.questionIDs[index])"
                >{{ obj.number}}</a
              >
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180">
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="167">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="165">
          </el-table-column>
          <el-table-column prop="userName" label="录入人" width="120">
          </el-table-column>
          <el-table-column label="操作" prop="id">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                @click="removeList(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 底部分页 -->
        <div class="block">
          <el-pagination
            background
            style="float:right; "
            layout="prev, pager, next, sizes, jumper"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="this.paging.pagesize"
            :total="this.counts"
            @prev-click="previousPage"
            @next-click="nextPage"
            @current-change="currentPage"
            @size-change="pageSize "
          >
          </el-pagination>
        </div>
        <!-- 底部弹窗 -->
        <questions-details v-if="popWindows" :pagData="pagData" @closeWindows="closeWindows"></questions-details>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from "@/api/hmmm/questions";
import QuestionsDetails  from "../components/question-details.vue"

export default {
  components:{
    QuestionsDetails,
  },
  data() {
    return {
      popWindows:false,
      tableData: [],
      counts: null,
      text: "",
      paging: {
        page: 1,
        pagesize: 20
      },
    pagData:{}
    };
  },
  methods: {
    async randomse() {
      const { data } = await randoms();
      console.log(data);
      this.tableData = data.items;
      console.log(this.tableData);
      this.counts = data.counts;
    },
    removeList(data) {
      console.log(data.id);
      console.log(this.tableData);
      this.$confirm("此操作将永久删除该文件数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await removeRandoms(data);
        })
        .then(() => {
          const index = this.tableData.findIndex(item => {
            return item.id == data.id;
          });
          console.log(data.id);
          console.log(index);
          if (index != -1) {
            this.tableData.splice(index, 1);
            this.$refs.tableList.doLayout();
            this.counts = this.counts - 1;
            this.$message({
              message: "文件数据删除成功",
              type: "success"
            });
          } else {
            return this.$message.error("删除失败");
          }
        })
        .catch(() => {
          this.$message({
            message: "取消删除",
            type: "warning"
          });
        });
    },
    searchText() {
      const index = this.tableData.findIndex(item => item.id == this.text);
      if (index != -1) {
        this.tableData = this.tableData.splice(index, 1);
        this.$refs.tableList.doLayout();
      } else {
        this.tableData = [];
        this.$refs.tableList.doLayout();
        return this.$message.error("找不到文件");
      }
    },
    removeText() {
      this.text = "";
    },
    // 上一页
    async previousPage() {
      if (this.paging.page > 1) {
        this.paging.page--;

        const { data } = await randoms({
          page: this.paging.page
        });
        this.tableData = data.items;
        this.$refs.tableList.doLayout();
        console.log("上一页");
      } else {
        this.$message("没有上一页了哦");
      }
      console.log(this.paging.page);
    },
    // 下一页
    async nextPage() {
      if (
        this.paging.page <=
        Math.trunc(this.counts / this.paging.pagesize) + 1
      ) {
        this.paging.page++;
        const { data } = await randoms({
          page: this.paging.page
        });
        this.tableData = data.items;
        this.$refs.tableList.doLayout();
        console.log("下一页");
      } else {
        this.$message("没有下一页了哦");
      }
       console.log(this.paging.page);
    },
    // 当前页
    async currentPage(value){
      this.paging.page = value
       const { data } = await randoms({
          page: this.paging.page
        });
        this.tableData = data.items;
        this.$refs.tableList.doLayout();
    },
    // 当前页条数
    async pageSize(value){
       this.paging.pagesize = value
       const { data } = await randoms({
          pagesize: this.paging.pagesize
        });
        this.tableData = data.items;
        this.$refs.tableList.doLayout();
    },
    // 开启弹窗
    async openDialog(datas){
      console.log(datas);
      this.popWindows = true;
      const {data} =  await detail(datas)
      this.pagData = data
      console.log(this.pagData);
    },
    closeWindows(value){
      this.popWindows = value;
      this.pagData={}
       this.$refs.tableList.doLayout();
    }
  },
  created() {
    this.randomse();
  },

};
</script>

<style scoped lang="scss">
.block {
  height: 40px;
  background-color: #fff;
  margin-top: 22px;
}
</style>
